<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      /* background:  */
      /* background-image: -webkit-linear-gradient(30deg, black, #522222, #ddd,red); */
      /* background-image: repeating-linear-gradient(black 0, #522222 10px, #ddd 20px,red 30px) */
      /* background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 255, 255, 0.15) 15px, rgba(255, 255, 255, 0.15) 30px); */
      /* animation: run 10s linear infinite; */

      /* background-image: radial-gradient(circle ,black 0, #ddd); */
      /* background-image: -webkit-radial-gradient(50px 50px,farthest-side,black, #ddd); */
      background-image: repeating-radial-gradient(red, black 10px);
    }
    @keyframes run {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 300px 0;
      }
    }
    /* 
      渐变的兼容写法中，
        方向写法直接写开始的方向
        标准写法，to 结束方向

        兼容写法中，度数的写法，0度 指向右边，度数增加则逆时针旋转
        标准写法 0度指向上边，度数增加则顺时针旋转

        线性渐变
          linear-gradient(方向, 颜色 [距离], 颜色)

        径向渐变
          radial-gradient(black 0, #ddd);
    */
  </style>
</head>
<body>
  <div></div>
</body>
</html>